<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_watch实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        computed和watch之间的区别
            1：computed能完成的功能，watch都可以完成
            2：watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。
        两个重要的小原则：
            1：所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或 组件实例对象
            2：所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等 Promise的回调函数），最好写成箭头函数，
                这样this的指向才是vm或组件实例对象。
     -->

    <!-- 准备好一个容器 -->
    <div id = "root">
       姓：<input type="text" v-model="firstName"> <br/><br/>
       名: <input type="text" v-model="lastName"> <br/><br/>
       全名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    
        // 创建vue实例
        const vm = new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName: '徐',
                lastName: '亚远',
                fullName: '徐-亚远'
            },
           watch:{
            // firstName(val){
            //     this.fullName = val + '-' + this.lastName
            // },

            firstName(val){

                // 定时的形式 异步实现
                setTimeout(() => {
                    console.log('this:', this)
                    this.fullName = val + '-' + this.lastName                    
                }, 1000);
            },

            lastName(val) {
                this.fullName = this.firstName + '-' + val
            }
           }
        })


    </script>


</body>

</html>